<template>
     <div style="margin-top:20px">
         <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                <el-button @click="doSearch()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
        </div>
        <div style="margin-bottom:20px">
            <el-button type="primary" @click="addInfo({router:$router})">新增</el-button>
            <el-button type="primary">新增(父子组件)</el-button>
            <el-button type="success" @click="update()" >修改</el-button>
            <el-button type="warning" >删除</el-button>
        </div> 
       <el-table
            :data="tableData"
            style="width: 100%"
            max-height="250"
            stripe
            border>
            <el-table-column
            fixed
            prop="date"
            label="#"
            type="selection"
            width="50">
            </el-table-column>
            <el-table-column
            fixed
            prop="date"
            label="序号"
            type="index"
            width="50">
            </el-table-column>
            <el-table-column
            prop="name"
            label="姓名"
            width="120">
            </el-table-column>
            <el-table-column
            prop="age"
            label="年龄"
            width="120">
            </el-table-column>
            <el-table-column
            prop="xingbie"
            label="性别"
            width="120">
            </el-table-column>
            <el-table-column
            prop="banji"
            label="班级"
            width="150">
            </el-table-column>
            <el-table-column
            prop="xuehao"
            label="学号"
            width="120">
            </el-table-column>
            <el-table-column
            prop="aihao"
            label="爱好"
            width="300">
            </el-table-column>
            <el-table-column
            prop="zhaopian"
            label="照片"
            width="250">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="150">
            <template slot-scope="scope">
            <el-button
                @click="edit({router:$router,stData:tableData[scope.$index]})"                
                type="text"
                size="small">
                编辑
            </el-button>
        </template>
        </el-table-column>
     </el-table>
    
    </div>
</template>

<script>
 import { mapState,mapActions } from 'vuex'
 export default {
     mounted(){
         this.getClass()
         this.getData()
     },
     data() {
         return {
             input: ''
      }
    },
    methods: {
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },
        ...mapActions(['getData','addInfo','edit','getClass']),
        doSearch(){
            this.getData(this.input)
        } 
    },
    computed:{
        // tableData(){
        //     return this.$store.state.tableData
        // }
        ...mapState(['tableData'])
    }
   
  }
</script>

<style>
  .input-with-select{
        width: 300px;
        float: right;
        margin-right: 25px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>

